<template>
	<view class="container">
		<view class="content-wrapper">
			<view class="flex justify-between mb-20">
				<text style="font-weight: bold;">订单号: 20230615001</text>
				<text class="text-red">待付款</text>
			</view>
			
			<view class="flex mb-20">
				<image src="/static/gugong.jpg" mode="aspectFill" style="width: 150rpx; height: 150rpx; border-radius: 10rpx;"></image>
				<view style="flex: 1; margin-left: 20rpx;">
					<text class="block">故宫博物院门票</text>
					<text class="block text-gray mt-10">数量: 2</text>
					<text class="block text-gray mt-10">时间: 2023-06-15 14:30</text>
				</view>
			</view>
			
			<view class="info-item flex justify-between mb-20">
				<text class="text-gray">门票类型</text>
				<text>成人票</text>
			</view>
			
			<view class="info-item flex justify-between mb-20">
				<text class="text-gray">使用日期</text>
				<text>2023-06-20</text>
			</view>
			
			<view class="info-item flex justify-between mb-20">
				<text class="text-gray">联系人</text>
				<text>张三</text>
			</view>
			
			<view class="info-item flex justify-between">
				<text class="text-gray">联系电话</text>
				<text>138****8888</text>
			</view>
			
			<view class="card mb-20">
				<view class="flex justify-between mb-20">
					<text class="title">费用明细</text>
				</view>
				
				<view class="info-item flex justify-between mb-20">
					<text class="text-gray">门票费用</text>
					<text>¥60 × 2份</text>
				</view>
				
				<view class="info-item flex justify-between mb-20">
					<text class="text-gray">服务费</text>
					<text>¥10</text>
				</view>
				
				<view class="info-item flex justify-between">
					<text class="text-gray">总计</text>
					<text class="text-red" style="font-size: 36rpx;">¥130</text>
				</view>
			</view>
		</view>
		
		<view class="fixed-bottom flex">
			<view class="button-line" style="flex: 1; margin-right: 20rpx;" @click="cancelOrder">取消订单</view>
			<view class="button" style="flex: 1;" @click="payOrder">立即支付</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			cancelOrder() {
				uni.showModal({
					title: '提示',
					content: '确定要取消订单吗？',
					success: (res) => {
						if (res.confirm) {
							uni.showToast({
								title: '订单已取消',
								icon: 'success'
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						}
					}
				})
			},
			payOrder() {
				uni.showToast({
					title: '支付功能开发中',
					icon: 'none'
				})
			}
		}
	}
</script>

<style>
	.info-item {
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #eee;
	}
	
	.info-item:last-child {
		border-bottom: none;
	}
	
	.fixed-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		padding: 20rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.button-line {
		border: 1rpx solid #007AFF;
		color: #007AFF;
		border-radius: 10rpx;
		text-align: center;
		padding: 20rpx;
	}
	
	.content-wrapper {
		height: calc(100vh - 140rpx);
		overflow-y: auto;
		padding-bottom: 140rpx;
	}
</style>